<div class="tab-pane">
    <div class="row">
        <div class="col-12">
            <h6>Selected items</h6>
            <table class="table table-sm table-hover" id="tbl-related-medias" ng-init="$ctrl.init()">
                <thead class="thead-light">
                    <tr>
                        <th scope="col" width="5%">
                            <span class="oi oi-move"></span>
                        </th>
                        <th scope="col" width="5%">
                            <span class="oi oi-sort-ascending"></span>
                        </th>
                        <th scope="col">Name</th>
                        <th scope="col">Image</th>
                        <th scope="col" width="5%">Showing?</th>
                    </tr>
                </thead>
                <tbody class="sortable media-navs">

                    <tr class="sortable-item" ng-repeat="item in $ctrl.product.mediaNavs track by $index">
                        <td style="cursor:move;">
                            <span class="oi oi-move"></span>
                        </td>
                        <td>
                            <input type="text" name="MediaNavs[{{$index}}].Priority" value="{{item.priority}}" class="item-priority form-control form-control-sm d-inline" style="width:40px;">
                        </td>
                        <td>
                            {{item.description}}
                        </td>
                        <td>
                            <a href="#" data-toggle="modal" data-target=".image-preview-modal-lg" data-imgsrc="{{item.image}}">
                                <img imageonload class="" ng-src="{{item.image}}" alt="{{item.description}}" height="50">
                            </a>
                        </td>
                        <td style="position:relative">
                            <span class="switch switch-sm position-absolute m-1">
                                <input type="checkbox" class="switch" data-val="{{item.isActived}}" id="MediaNavs_{{item.mediaId}}" name="MediaNavs[{{$index}}].IsActived" ng-model="item.isActived" value="{{item.isActived}}">
                                <label class="switch m-0" for="MediaNavs_{{item.mediaId}}">
                                </label>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div><!--activeMedias-->
    <div class="row">
        <div class="col-md-8">
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">
                        <i class="mi mi-Search btn-search-media" ng-click="$ctrl.loadMedias()" style="top:0;cursor:pointer;"></i>
                    </div>
                </div>
                <input type="text" ng-model="request.keyword" ng-enter="$ctrl.loadMedias()" class="form-control media-keyword" placeholder="Search media items..." aria-label="Search media items..." aria-describedby="btnGroupAddon">
            </div>
        </div>
    </div>
    <div class="card-columns" style="column-count: 3 !important;column-gap: 0.75rem;">
        <div class="card" ng-repeat="media in $ctrl.medias.items" ng-hide="media.isHidden">
            <span class="switch switch-sm position-absolute m-1">
                <input type="checkbox" class="switch" ng-model="media.isActived" ng-change="$ctrl.activeMedia(media)" id="Media_Image_{{media.id}}" value="true">
                <label class="switch m-0" for="Media_Image_{{media.id}}">
                    @* {{media.title}} {{$ctrl.medias.totalPage}}*@
                </label>
            </span>
            <div class="btn-group btn-group-sm position-absolute m-1" role="group" aria-label="Basic example" style="z-index:3; right:0;">
                <button class="btn btn-light custom-file-cropper" data-toggle="modal" data-target=".image-crop-modal-lg" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}">
                    <i class="mi mi-Crop"></i>
                </button>
                <button class="btn btn-light btn-sm" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}" ng-click="removeMedia(media.id)">
                    <i class="mi mi-Delete"></i>
                </button>
            </div>
            <a href="#" data-toggle="modal" data-target=".image-preview-modal-lg" data-imgsrc="{{media.fullPath}}">
                <img class="card-img-top" ng-src="{{media.fullPath}}" alt="{{media.title}}">
            </a>
        </div>
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm pull-right">
            <li class="page-item">
                <a class="page-link active" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex-1)" ng-hide="$ctrl.medias.pageIndex==0">Prev</a>
            </li>
            <li class="page-item" ng-class="{active: n-1==$ctrl.medias.pageIndex}" ng-repeat="n in range($ctrl.medias.totalPage)"><a class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias(n-1)">{{n}}</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex + 1)" ng-hide="$ctrl.medias.pageIndex >= ($ctrl.medias.totalPage-1)">Next</a>
            </li>
        </ul>
    </nav>
</div>
